// pages/tomato/tomato.js
let util = require( '../../util/util.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    clockShow: false,
    clockHeight: 1000,
    time: '5',
    mtime: 300000,
    timeStr: '05:00',
    rate: '',
    timer: null,

    cateArr: [
      {
        icon: 'work',
        text: '工作'
      },
      {
        icon: 'study',
        text: '学习'
      },
      {
        icon: 'think',
        text: '思考'
      },
      {
        icon: 'write',
        text: '写作'
      },
      {
        icon: 'sport',
        text: '运动'
      },
      {
        icon: 'read',
        text: '读书'
      }
    ],
    cateActive:'0',
    okShow: false,
    pauseShow: true,
    continueCancelShow: false
  },


  //滑动条时间
  slideChange (e) {
    this.setData({
      time: e.detail.value
    })
  },

  //选择任务
  clickCate (e) {
    this.setData({
      cateActive: e.currentTarget.dataset.index
    })
  },

  //开始番茄
  start () {
    this.setData({
      clockShow: true,
      mtime: this.data.time*60*1000,
      timeStr: parseInt(this.data.time) >= 10 ? this.data.time+ ':00' :
      '0' + this.data.time + ':00'
    }) 
    this.drawBg()
    this.drawActive()
  },

  //画背景
  drawBg () {
    let lineWidth = 6 / this.data.rate
    let ctx = wx.createCanvasContext('prgross_bg')
    ctx.setLineWidth(lineWidth)
    ctx.setStrokeStyle('#000000')
    ctx.setLineCap('round')
    ctx.beginPath()
    ctx.arc(400/this.data.rate/2, 400/this.data.rate/2, 
      400/this.data.rate/2-2*lineWidth,0, 2*Math.PI, false)
    ctx.stroke()
    ctx.draw()
  },

  drawActive () {
    let that = this
    let timer = setInterval( function () {
      let angle = 1.5 + 2*(that.data.time*60*1000 - that.data.mtime)/
      (that.data.time*60*1000)
      let currentTime = that.data.mtime - 100
      that.setData({
        mtime: currentTime
      })
      if (angle < 3.5) {
        if (currentTime % 1000 == 0 ) {
          let timeStr1 = currentTime / 1000
          let timeStr2 = parseInt(timeStr1/60)
          let timeStr3 = (timeStr1 - timeStr2*60) >=10 ? (timeStr1 - timeStr2*60):
          '0' + (timeStr1 - timeStr2*60)
          timeStr2 = timeStr2 >= 10 ? timeStr2 : '0' + timeStr2
          that.setData({
            timeStr: timeStr2+':'+timeStr3
          })
        }
        let lineWidth = 6 / that.data.rate;//px
        let ctx = wx.createCanvasContext('progress_active');
        ctx.setLineWidth(lineWidth);
        ctx.setStrokeStyle('#ffffff');
        ctx.setLineCap('round');
        ctx.beginPath();
        ctx.arc(400/that.data.rate/2,400/that.data.rate/2,400/that.data.rate/2-2*lineWidth,
          1.5*Math.PI,angle*Math.PI,false);
        ctx.stroke();
        ctx.draw();
      } else {
        let logs = wx.getStorageSync('logs') || [];
        logs.unshift({
          date: util.formatTime(new Date()),
          cate: that.data.cateActive,
          time: that.data.time
        });
        wx.setStorageSync('logs', logs);
        that.setData({
          timeStr:'00:00',
          okShow:true,
          pauseShow:false,
          continueCancelShow:false,
          // clockShow:false
        });
        clearInterval(timer);
      }
    },100)
    that.setData({
      timer:timer
    })
   },

   //暂停
   pause () {
     clearInterval(this.data.timer)
     this.setData({
       pauseShow: false,
       continueCancelShow: true,
       okShow: false 
     })
   },
   //继续
   continue () {
     this.drawActive()
     this.setData({
       pauseShow: true,
       continueCancelShow: false,
       okShow: true
     })
   },
   //取消
   cancel () {
     clearInterval(this.data.timer)
     this.setData({
       pauseShow: true,
       continueCancelShow: false,
       okShow: false,
       clockShow: false
     })
   },
   
   //返回
   ok () {
     clearInterval(this.data.timer)
     this.setData({
       pause: true,
       continueCancelShow: false,
       okShow: false,
       clockShow: false
     })
   },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let res = wx.getSystemInfoSync()
    let rate = 750 / res.windowWidth;
    console.log(rate);
    this.setData({
      rate: rate,
      clockHeight: rate * res.windowHeight
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})